<template>
  <div class="upload-image" v-loading='loadingImage'>
      <div class="params-title">
          <span>参数设置</span>
          <div class="params-reset" @click='resetParams'>
              <i class="el-icon-refresh-right"></i>重置
          </div>
      </div>

    <div style="margin-bottom:10px" v-for="(hand, index) in handleList" :key="index">
        <div class="title-top" @click="showChildren(hand)">{{hand.title}}</div>
        <div class='hanlde-list' v-for="(child, index) in hand.children" :key="index" v-if="hand.show">
          <div class="title"> 
              <span>{{child.Title}}</span>
              <span> {{child.DefVal}} </span>
          </div>
          <div class="list-slider">
             <i style="cursor:pointer" class="el-icon-zoom-out" @click="changeSliderBtn(child,1)"></i> 
             <el-slider @change="changeSlider" class="slider" style="width:100%" v-model="child.DefVal"></el-slider> 
             <i style="cursor:pointer"  @click="changeSliderBtn(child, 2)" class="el-icon-zoom-in"></i>
          </div>
      </div>
    </div>


      <!-- <div class='hanlde-list' v-for="(hand, index) in handleList" :key="index">
          <div class="title"> 
              <span>{{hand.Title}}</span>
              <span> {{hand.DefVal}} </span>
          </div>
          <div class="list-slider">
             <i style="cursor:pointer" class="el-icon-zoom-out" @click="changeSliderBtn(hand,1)"></i> 
             <el-slider @change="changeSlider" class="slider" style="width:100%" v-model="hand.DefVal"></el-slider> 
             <i style="cursor:pointer"  @click="changeSliderBtn(hand, 2)" class="el-icon-zoom-in"></i>
          </div>
      </div> -->
  </div>
</template>

<script>
import { getUploadImage,getParams } from '../../../api/axios'
export default {
    data(){
        return{
            loadingImage: false,
            handleList:[],
            originList:[]
        }
    },
    methods:{
        showChildren(hand){
            hand.show = !hand.show
        },
        changeSlider(val){
            this.loadingImage = true
            let data = {}
            this.handleList.forEach(item => {
                item.children.forEach(ele => {
                    data[ele.KeyWord] = ele.DefVal
                })
            })
            console.log(data,'data')
            this.getNewImgfromParams(data)
        },
        resetParams(){
            this.handleList = JSON.parse(JSON.stringify(this.originList))
            this.$forceUpdate()
            this.changeSlider()

        },
        changeSliderBtn(item, v){
            console.log(item,'item')
            if(v ==1){
                item.DefVal -= 1
            }else{
                item.DefVal += 1
            }
            this.changeSlider()
        },
        async getNewImgfromParams(data){
            let formdata = new FormData()
            formdata.append('apikey','70DABA18-3B05-4EB3-B604-04665ABB3FD6' )
            formdata.append('file_name','' )
            formdata.append('paramJson',JSON.stringify(data))
            await getUploadImage(formdata).then(res =>{
                if(res.traceId){
                    this.$notify.error({
                        title: `错误,5秒后自动关闭`,
                        message: res.detail,
                        duration: 5000
                    });
                    this.$emit('getImgError')
                    this.loadingImage = false
                    return
                }else{
                    this.$emit('uploadSuccess',res)
                    this.loadingImage = false
                }
            }).catch(error =>{
                console.log(error,'error')
            })
        },
    },
    async created(){
        await getParams().then(res =>{
            let data = JSON.parse(res)
            let list = []
            Object.keys(data).forEach(item =>{
                let obj = {
                    title:item,
                    children : data[item],
                    show:true
                }
                list.push(obj)
            })
            this.handleList = JSON.parse(JSON.stringify(list))
            this.originList = JSON.parse(JSON.stringify(list))
        })
    }
}
</script>

<style lang='scss' scoped>
.title-top{
    background-color: #ccc;
    text-indent: 10px;
    line-height: 30px;
    cursor: pointer;
}
.upload-image{
    overflow: auto;
    background-color: #fff;
    width: 100%;
    height: 100%;
    .hanlde-list{
        margin-top: 10px;
        padding: 0 20px;
        .title{
            display: flex;
            justify-content: space-between;
        }
        .list-slider{
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            .slider{
                margin: 0 10px;
            }
        }
    }
    .params-title{
        height: 40px;
        background-color: #94d1ca;
        line-height: 40px;
        color: #fff;
        text-align: center;
        margin-bottom: 15px;
        position: relative;
        .params-reset{
            position: absolute;
            cursor: pointer;
            right: 10px;
            top: 0;
        }
    }
}
/deep/ .el-slider__bar{
    background-color: #ffe329;
}
/deep/ .el-slider__button{
    border-color: #ffe329;
}
</style>